<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<title>注册</title>
		<meta charset="UTF-8" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/lib/bootstrap/css/bootstrap.min.css" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/lib/font-awesome-4.0.3/css/font-awesome.min.css" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/css/animate.css" />
		<link rel="stylesheet" href="<%=request.getContextPath()%>/css/main.css" />
		<style type="text/css">
			html, body {
				height: 100%;
				margin: 0;
				padding: 0;
				background-color: #FCFCFC;
				font-size: 14px!important;
			}
			.navbar {
				background-color: #438EB9;
                border: 0;
                border-radius: 0;
			}
			.navbar-brand {
				color: #fff !important;
			}
			.navbar-brand img {
				position: relative;
				top: -4px;
				width: 45px;
				height: 30px;
			}
			.login-container {
				margin-top: 2%;
				margin-left: auto;
				margin-right: auto;
				width: 21%;
				min-width: 250px;
			}
			.login-container .title {
				margin-bottom: 25px;
				text-align: center;
			}
			.login-container .form-group {
				position: relative;
				margin-bottom: 15px;
			}
            .login-container .form-group label {
                font-weight: 400;
            }
			.login-container .btn-primary, .login-container .btn-primary:focus, .login-container .btn-primary:visited {
				font-size: 16px;
				letter-spacing: 10px;
				background-color: #438EB9;
				border-color: #438EB9;
			}
			.login-container .btn-primary:hover, .login-container .btn-primary:active {
				opacity: .9;
				filter: ALPHA(opacity=90);
			}
			.form-group .form-control,
			.form-group button {
				display: inline-block;
				width: 90%;
			}
			.form-group label {
				display: block;
			}
			.required {
				color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div class="navbar navbar-default">
			<a class="navbar-brand" href="http://www.openkoala.org" target="_">
				<img src="<%=request.getContextPath()%>/images/global.logo.png"/>
				OPENCI
			</a>
			<div class="navbar-text navbar-right">
				<a href="<%=request.getContextPath()%>/login.koala"><i class="fa fa-hand-o-right" data-toggle="tooltip" data-placement="bottom" title="登录"></i></a>
			</div>
		</div>
		<div class="login-container">
			<h3 class="title">Join Us Today</h3>
			<form class="form-horizontal" action="<%=request.getContextPath()%>/developer/create.koala" id="form">
				<div class="form-group">
                    <label for="developerId">开发者账号:</label>
					<input type="text" class="form-control" id="developerId" name="developerId" placeholder="用户名"/>
					<span class="required">*</span>
				</div>
                <div class="form-group">
                    <label for="password">密码:</label>
                    <input type="password" class="form-control" id="password" name="passowrd" placeholder="密码"/>
                	<span class="required">*</span>
                </div>
                <div class="form-group">
                    <label for="confirmPassword">确认密码:</label>
                    <input type="password" class="form-control" id="confirmPassword" name="confirmPassword" placeholder="确认密码"/>
                	<span class="required">*</span>
                </div>
                <div class="form-group">
                    <label for="name">名称:</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="名称"/>
                	<span class="required">*</span>
                </div>
                <div class="form-group">
                    <label for="email">Email:</label>
                    <input type="text" class="form-control" id="email" name="email" placeholder="Email"/>
                	<span class="required">*</span>
                </div>
				<div class="form-group">
					<button type="button" class="btn btn-primary btn-block" id="loginBtn">
						注册
					</button>
				</div>
			</form>
		</div>
		<script type="text/javascript" src="<%=request.getContextPath()%>/lib/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/lib/respond.min.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/lib/bootstrap/js/bootstrap.js"></script>
		<script type="text/javascript" src="<%=request.getContextPath()%>/lib/koala-ui.plugin.js"></script>	
		<script type="text/javascript" src="<%=request.getContextPath()%>/lib/validate.js"></script>
		<script>
			$(function(){
				$('[data-toggle="tooltip"]').tooltip();
				$('#password').on('contextmenu', function(){
					return false;
				});
				$('#confirmPassword').on('contextmenu', function(){
					return false;
				});
				$('#loginBtn').on('click', function(){
					var $btn = $(this);
					if($btn.hasClass('disabled')){
						return;
					}
					var body = $('body');
					var developerId = $('#developerId');
					var developerIdVal = developerId.val().replace(/(^\s*)|(\s*$)/g,"");
					var confirmPassword = $('#confirmPassword');
			 		var confirmPasswordVal = confirmPassword.val().replace(/(^\s*)|(\s*$)/g,"");
					var name = $('#name');
					var nameVal = name.val().replace(/(^\s*)|(\s*$)/g,"");
					var email = $('#email');
					var emailVal = email.val().replace(/(^\s*)|(\s*$)/g,"");					
					var password = $('#password');
					var passwordVal = password.val().replace(/(^\s*)|(\s*$)/g,"");					
					if(!Validation.notNull(body, developerId, developerIdVal, '请输入开发者账号')){
						return;
					}
					if(!Validation.serialNmuber(body, developerId, developerIdVal, '开发者ID不合法')){
						return false;
					}
					if(developerIdVal.length > 20){
						showErrorMessage(body, developerId, '开发者账号最长20位');
						return;
					}

					if(!Validation.notNull(body, password, passwordVal, '请输入密码')){
						return;
					}
					if(passwordVal.length < 8){
						showErrorMessage(body, password, '密码最少8位');
						return;
					}
					if(passwordVal.length > 12){
						showErrorMessage(body, password, '密码最长12位');
						return;
					}
					if(!Validation.notNull(body, confirmPassword, confirmPasswordVal, '请输入确认密码')){
						return;
					}
					if(!Validation.notNull(body, name, nameVal, '请输入名称')){
						return;
					}
					if(!Validation.notNull(body, email, emailVal, '请输入Email')){
						return;
					}
					if (!Validation.email(body, email, emailVal, 'Email不合法')) {
						return;
					}
					if(password.val() != confirmPassword.val()){
						body.message({
							type: 'warning',
							content: '密码与确认密码不一致!'
						});
						return;
					}
					var data = {
						developerId: developerIdVal,
						password: passwordVal,
						name: nameVal,
						email: emailVal,
					}
					$btn.addClass('disabled');
					$.post('<%=request.getContextPath()%>/developer/create.koala', data).done(function(data){
						if(data.result){
							$('body').message({
								type: 'success',
								content: '注册成功'
							});
							window.location.href = '<%=request.getContextPath()%>/login.koala';
						}else{
							$('body').message({
								type: 'error',
								content: data.actionError || data.msg
							});
							$btn.removeClass('disabled');
						}
					});
				});
			});
		</script>
	</body>
</html>
